<template>
  <div>
    <van-search
      v-model="searchShopName"
      placeholder="请输入搜索商铺"
      show-action
      @search="onSearch"
      @cancel="onCancel"
      @clear="onClaer"
      class="search-top"
    >
      <div slot="action" @click="onSearch">搜索</div>
    </van-search>
    <GDMap ref="GDMap" :points="items" :mapHeight="100"></GDMap>
    <!-- <div class="device-manage"> -->
    <van-list
      v-model="loading"
      :finished="finished"
      :immediate-check="true"
      :offset="300"
      @load="loadMore"
      finished-text="没有更多了"
      class="shop-list"
    >
      <van-cell class="shop-item" is-link v-for="(item, index) in items" :key="index">
        <div style="display:flex;justify-content:space-between;">
          <div @click="locate(item.lng,item.lat,index)">
            <div class="shopName">
              <van-icon name="shop2" />
              &nbsp{{ item.shopName }}
            </div>
            <div class="addr">{{ item.addr }}</div>
          </div>
          <div @click="goto(item.shopId)" style="margin-right:15px;min-width:30px;">
            <div>
              <van-icon name="smoke-sensor" />
              &nbsp{{ item.devCount }}
            </div>
            <div>
              <van-icon name="alarm" />
              &nbsp{{ item.alarmCount }}
            </div>
          </div>
        </div>
      </van-cell>
    </van-list>

    <is-empty v-if="isEmpty">暂无商铺</is-empty>

    <transition name="fade">
      <van-icon name="back-top" class="backTop" @click.native="backTop" v-show="showArrow" />
    </transition>
    <!-- </div> -->
  </div>
</template>

<script>
import { getShopList } from "./../../api/device";
// import loadMore from "@/mixin/list-load-more";
import scrollFixed from "@/mixin/scroll-fixed";
import IsEmpty from "@/components/is-empty/";
import { throttle } from "@/libs/util";
import GDMap from "./../../components/AMap/map.vue";
export default {
  mixins: [scrollFixed],
  data() {
    return {
      searchShopName: "",
      showArrow: false,
        pages: {
        perPage: 10,
        currPage: 1,
        pageCount: 1
      },
      items: [],
      loading: false,
      finished: false,
      isEmpty: false
    };
  },
  computed: {},
  watch: {},
  created() {
    this.scrollShowArrow = throttle(this.scrollShowArrow, 100);
  },
  activated() {
    this.eventListen(true);
  },

  deactivated() {
    this.eventListen(false);
  },

  methods: {
    onSearch() {
      this.resetInit();
    },
    onCancel() {
      this.resetInit();
    },
    onClaer() {
      this.resetInit();
    },
    resetInit() {
     this.finished = true;
      let me = this;
      setTimeout(function() {
        me.items = [];
        me.pages = {
          perPage: 10,
          currPage: 1,
          pageCount: 1
        };
        me.finished = false;
        me.loading = false;
      }, 100);
    },
    loadMore() {
      let params = {
        shopName: this.searchShopName,
        current: this.pages.currPage,
        size: this.pages.perPage
      };
      getShopList(params).then(res => {
         if(res.data.total==0){
           this.loading = false;
           this.finished = true;
           return
        }
        const items = res.data.records;
        this.pages.pageCount = Math.ceil(res.data.total / this.pages.perPage);
        this.items.push(...items);
        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.pages.currPage == this.pages.pageCount) {
          this.finished = true;
        } else {
          this.pages.currPage += 1;
        }
      });
    },
    eventListen(isBind = true) {
      if (isBind) {
        this.$el.addEventListener("scroll", this.scrollShowArrow);
      } else {
        this.$el.removeEventListener("scroll", this.scrollShowArrow);
      }
    },
    scrollShowArrow() {
      this.showArrow = this.$el.scrollTop > 120;
    },
    backTop() {
      this.$el.scrollTop = 0;
    },
    locate(lng, lat, index) {
      this.$refs.GDMap.locateMarker(lng, lat, index);
    },
    goto(id) {
      this.$router.push({ path: "alarm-info", name: "alarm-info", query: id });
    }
  },

  components: {
    IsEmpty,
    GDMap
  }
};
</script>


<style lang="scss" scoped>
@import "./../../../../assets/scss/mixin";
.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s;
}
.backTop {
  position: fixed;
  right: 20px;
  bottom: 80px;
  font-size: 24px;
}
.search-top {
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 2020;
}
.device-manage {
  overflow: auto;
  height: 100%;
  margin-top: 200px;
}
.shop-list {
  margin-top: 255px;
}
.van-swipe-cell {
  &__left,
  &__right {
    color: #ffffff;
    font-size: 14px;
    height: 100%;
    display: inline-block;
    text-align: center;
    display: flex;
    align-items: center; /*垂直居中*/
    justify-content: center; /*水平居中*/
    background-color: #f44;
  }
}
.van-button__text {
  width: 100%;
}
.shop-item {
  padding: 15px;
  .shopName {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
  }
  .addr {
    font-size: 12px;
    line-height: 16px;
    color: #666;
  }
}
</style>
